<template>
  <div class="style-editor">
    <el-collapse>
      <el-collapse-item title="尺寸与间距" name="1">
        <div class="grid grid-cols-2 gap-2">
          <el-form-item label="宽度">
            <el-input-number
              v-model="styles.width"
              size="small"
              @change="updateStyle"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number
              v-model="styles.height"
              size="small"
              @change="updateStyle"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="外边距">
            <el-input-number
              v-model="styles.margin"
              size="small"
              @change="updateStyle"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="内边距">
            <el-input-number
              v-model="styles.padding"
              size="small"
              @change="updateStyle"
            ></el-input-number>
          </el-form-item>
        </div>
      </el-collapse-item>

      <el-collapse-item title="颜色与外观" name="2">
        <div class="grid grid-cols-2 gap-2">
          <el-form-item label="背景色">
            <el-color-picker
              v-model="styles.backgroundColor"
              size="small"
              @change="updateStyle"
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="文本颜色">
            <el-color-picker
              v-model="styles.color"
              size="small"
              @change="updateStyle"
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="边框颜色">
            <el-color-picker
              v-model="styles.borderColor"
              size="small"
              @change="updateStyle"
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="边框宽度">
            <el-input-number
              v-model="styles.borderWidth"
              size="small"
              :min="0"
              :max="10"
              @change="updateStyle"
            ></el-input-number>
          </el-form-item>
        </div>
      </el-collapse-item>

      <el-collapse-item title="文本样式" name="3">
        <div class="grid grid-cols-2 gap-2">
          <el-form-item label="字体大小">
            <el-input-number
              v-model="styles.fontSize"
              size="small"
              @change="updateStyle"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="字体粗细">
            <el-select v-model="styles.fontWeight" size="small" @change="updateStyle">
              <el-option label="正常" value="normal"></el-option>
              <el-option label="加粗" value="bold"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文本对齐">
            <el-select v-model="styles.textAlign" size="small" @change="updateStyle">
              <el-option label="左对齐" value="left"></el-option>
              <el-option label="居中" value="center"></el-option>
              <el-option label="右对齐" value="right"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useLowCodeStore } from '../../store/lowcode'

const props = defineProps({
  component: Object,
})

const store = useLowCodeStore()
const styles = ref({
  width: '',
  height: '',
  margin: 0,
  padding: 0,
  backgroundColor: '',
  color: '',
  borderColor: '',
  borderWidth: 0,
  fontSize: 14,
  fontWeight: 'normal',
  textAlign: 'left',
})

// 监听组件变化，更新样式
watch(
  () => props.component,
  (newValue) => {
    if (newValue && newValue.style) {
      // 将组件样式同步到本地状态
      Object.keys(styles.value).forEach((key) => {
        if (newValue.style[key] !== undefined) {
          styles.value[key] = newValue.style[key]
        }
      })
    } else {
      // 重置样式
      resetStyles()
    }
  },
  { deep: true, immediate: true },
)

// 初始化
onMounted(() => {
  if (props.component && !props.component.style) {
    props.component.style = {}
  }
})

// 更新样式
const updateStyle = () => {
  if (!props.component) return

  // 确保style对象存在
  if (!props.component.style) {
    props.component.style = {}
  }

  // 更新组件样式
  Object.keys(styles.value).forEach((key) => {
    // 只更新有值的样式
    if (styles.value[key] !== '' && styles.value[key] !== null) {
      props.component.style[key] = styles.value[key]
    } else {
      // 删除空值
      delete props.component.style[key]
    }
  })

  // 更新store中的组件
  store.updateNowComponents(props.component)
}

// 重置样式
const resetStyles = () => {
  styles.value = {
    width: '',
    height: '',
    margin: 0,
    padding: 0,
    backgroundColor: '',
    color: '',
    borderColor: '',
    borderWidth: 0,
    fontSize: 14,
    fontWeight: 'normal',
    textAlign: 'left',
  }
}
</script>
